<script lang="ts" setup>
import footerSvg from '@/assets/main/svg_4.svg'
import { useSiteSetting } from '@/hooks/siteSettings'
import { has } from 'lodash-es'
import { useI18n } from 'vue-i18n'

const site = useSiteSetting()
const getLogoSize = () => {
  if (has(site.siteSetting.value.extends, 'footer_logo_size')) {
    //存在logo size
    const logoSize: any = site.siteSetting.value.extends.footer_logo_size
    return `width:${logoSize.width}px; height:${logoSize.height}px`
  } else {
    return `width:158px;height:48px;`
  }
}

const { locale } = useI18n()
</script>

<template>
  <div class="flex flex-col items-center justify-center gradient" style="background:#20252f;">
    <!-- <img :src="footerSvg" alt="footer" class="transform -translate-y-1" /> -->
    <section class="container py-6 mb-12 text-center">
      <div class="flex items-center justify-center w-full">
        <!-- <div
          :style="[
            `background:url('${site.siteSetting.value.foot_logo}') no-repeat;background-size:100% 100%;${getLogoSize()}`
          ]"
          class="flex-shrink-0 bg-cover"
        /> -->
      </div>
      <div class="w-full mt-4 mb-4">
        <!-- <div class="w-1/6 h-1 py-0 mx-auto my-0 bg-white rounded-t opacity-25" /> -->
      </div>
      <div class="flex flex-col items-center text-xs font-bold">
        <span v-for="i in site.siteSetting.value.copyright">{{ i[locale] }}</span>
      </div>
    </section>
  </div>
</template>
